<template>
  <div>
    <el-dialog
      ref="isPopWindows"
      v-dialogDrag
      :title="'出库单详情'"
      :visible="popupsVisible"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      center
      @close="close"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="'出库单详情'"
        :style-type="$store.state.app.dialogType"
      />

      <one-table-template
        v-loading="loading"
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-table-defult-height="400"
        :dynamic-is-show-select="true"
        :dynamic-is-init-table="false"
        dynamic-table-ref="table"
        :dynamic-is-show-more-btn="true"
        :dynamic-is-fix-index="false"
        :is-show-pagination="false"
        :callback-obj="callbackObj"
      >
        <!-- 出库数量-->
        <template #outStoreQty="scope">
          <el-input-number
            :key="'outqty'"
            v-model="scope.row['outStoreQty']"
            :step="1"
            :min="1"
            step-strictly
            @change="outStoreQtyChange($event, scope.row, scope.col)"
          />
        </template>
        <!-- 名称码-->
        <template #addressCode="scope">
          <el-input
            v-model="scope.row.addressCode"
            placeholder="请输入地址码"
            clearable
          />
        </template>
      </one-table-template>
    </el-dialog>
  </div></template>

<script>
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
export default {
  name: 'ChukuPopups',
  components: {
    dialogHeader,
    OneTableTemplate
  },
  props: {
    popupsVisible: { type: Boolean, default: false },
    editRowData: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      loading: false,
      tableButtons: [
        {
          compKey: 'btnKey2',
          size: 'small',
          icon: 'el-icon-upload2',
          type: 'primary',
          clickEvent: async() => {
            // 出库
            this.loading = true
            const apiUrl = '/mp/e3sh/spareparts/nodestorehouse/repairOutStorageService/outStorage.do'
            const variables = this.selections
            let response
            try {
              response = await this.$requestAPI({ apiUrl, variables })
            } catch (e) { this.loading = false; return }
            if (response.result === '1') {
              this.$message(response.msg || '出库成功!')
              this.$parent.queryTable()
              this.close()
            } else {
              this.$message(response.msg || '请求失败！')
            }
            this.loading = false
          },
          text: '出库',
          position: 'right'
        }
      ],
      tableComponents: [],
      tableCols: [
        {
          prop: 'partNo',
          label: '备件编码'
        },
        {
          prop: 'partName',
          label: '备件名称'
        },
        {
          prop: 'partQty',
          label: '申请数量'
        },
        {
          prop: 'outQty',
          label: '已出库数量'
        },
        {
          prop: 'returnQty',
          label: '已退货数量'
        },
        {
          prop: 'outStoreQty',
          label: '出库数量+',
          isSlot: true,
          width: 140
        },
        {
          prop: 'addressCode',
          label: '地址码+',
          isSlot: true,
          width: 140
        },
        {
          prop: 'retrospectNo',
          label: '追溯件号+',
          isComponent: true,
          comps: [
            {
              compKey: 'compKey5' + this.$utils.generateId(),
              codeField: 'retrospectNo',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText'
            }
          ],
          width: 120
        },
        {
          prop: 'pickingPersonName',
          label: '领料人+',
          isComponent: true,
          comps: [
            {
              compKey: 'compKey5' + this.$utils.generateId(),
              codeField: 'pickingPersonName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText'
            }
          ],
          width: 120
        },
        {
          prop: 'remark',
          label: '备注',
          isComponent: true,
          comps: [
            {
              compKey: 'compKey5' + this.$utils.generateId(),
              codeField: 'remark',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText'
            }
          ],
          width: 120
        }
      ],
      formField: {

      },
      selections: [],
      callbackObj: {
        onCheckSelectChange: sel => {
          this.selections = sel
        }
      }
    }
  },
  methods: {
    selectAll() {
      this.selections = this.$utils.deepCopy(this.$refs['multipleTable'].list)
      this.$refs['multipleTable'].$refs['table'].toggleAllSelection()
    },
    setDefault() {
      this.$refs['multipleTable'].list.forEach(row => {
        row['pickingPersonName'] = this.editRowData.saName || ''
      })
    },
    async open() {
      this.$nextTick(async() => {
        this.$refs['multipleTable'].listLoading = true
        const apiUrl = '/mp/e3sh/spareparts/nodestorehouse/repairOutStorageService/queryRepairOutStorageInfo.do'
        const variables = {
          repairOrderCode: this.editRowData.repairOrderCode
        }
        let response
        try {
          response = await this.$requestAPI({ apiUrl, variables })
        } catch (e) { this.$refs['multipleTable'].listLoading = false; return }
        if (response.result === '1') {
          this.$refs['multipleTable'].list = response.rows
          this.selectAll()
          this.setDefault()
        } else {
          this.$message(response.msg || '请求失败！')
        }
        this.$refs['multipleTable'].listLoading = false
      })
    },
    close() {
      this.$emit('update:popups-visible', false)
    }
  }
}
</script>

<style lang="css" scoped>

</style>
